<template>
	<view class="wrapper">
		<form @submit="onSubmit">
			<view class="block">
				<view class="row">
					<text class="label">可用商户：</text>
					<view class="picker box">
						<picker :style="styleComputed('mchIndex')" name="mchIndex" class="input" :range="MCHS" range-key="mchName" :value="vdata.saveObject.mchIndex" @change="onMchChange">
							{{ vdata.saveObject.mchIndex !== null ? MCHS[vdata.saveObject.mchIndex].mchName : '请选择商户' }}
						</picker>
						<uni-icons type="down" color="#ddd"></uni-icons>
					</view>
				</view>
				<view class="line"></view>
				<view class="row">
					<text class="label">商户号：</text>
					<view class="input">{{ mchInfo.mchNo }}</view>
				</view>
				<view class="line"></view>
				<view class="row">
					<text class="label">微信商户号：</text>
					<view class="input">{{ mchInfo.wechatSubmerchantNo ?? '--' }}</view>
				</view>
				<view class="line"></view>
				<view class="row">
					<text class="label">支付宝商户号：</text>
					<view class="input">{{ mchInfo.aliSubmerchantNo ?? '--' }}</view>
				</view>
				<view class="line"></view>
				<view class="row edit">
					<text class="label">经营地址：</text>
					<view class="input">{{ mchInfo.address }}</view>
					<view class="edit-btn" @click="onChooseLocation">
						<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a34e2430-4c74-43b2-a2fe-ac55cfc7fa16.png" style="width: 28rpx;" mode="widthFix"></image>
						<text>修改</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="row edit">
					<text class="label">商户定位：</text>
					<view class="input">{{ mchInfo.location ? `[${mchInfo.location.longitude}，${mchInfo.location.latitude}]` : `[--，--]` }}</view>
					<view class="edit-btn" @click="onGetLocation">
						<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/834ffeec-9eee-44f2-a862-2e33d694aab4.png" style="width: 28rpx;" mode="widthFix"></image>
						<text>重新定位</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="row edit">
					<text class="label">门头照：</text>
					<gzMchImg class="input" style="width: 336rpx;" :mchImg="mchInfo.mchListImage" :mcc="mchInfo.mcc"></gzMchImg>
				</view>
				<view class="row no-edit">
					<view class="title">不可修改数据</view>
					<view class="content">
						<view>
							<text>归属机构号：</text>
							<text>{{ mchInfo.agentNo }}</text>
						</view>
						<view>
							<text>归属机构名称：</text>
							<text>{{ mchInfo.agentName }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-wrap">
				<button form-type="submit" plain>确认修改</button>
			</view>
		</form>
	</view>
</template>

<script setup>
	import { reactive, ref, computed, onUnmounted } from 'vue'
	import storageManage from '@/util/storageManage.js'
	import $infoBox from '@/common/fun.js'
	import dayjs from 'dayjs'
	import { $mchActivityMchInfo, $mchActivityEditMchInfo } from '@/http/apiManager.js'
	import { onLoad } from '@dcloudio/uni-app'
	import locationInit from '@/util/location.js'

	// 数据源
	const vdata = reactive({
		saveObject: {
			mchIndex: '0'
		}
	})
	// 样式计算属性
	const styleComputed = computed(() => (key) => {
		if(vdata.saveObject[key] !== undefined && vdata.saveObject[key] !== null){
			return { color: '#333' }
		}
		return { color: '#a3a3a3' }
	})
	// 商户列表数据
	const MCHS = ref(storageManage.MCHS_CC())
	
	// 当前商户信息
	const mchInfo = ref({})
	
	// onLoad
	onLoad(() => {
		// 查询当前商户信息
		getMchInfo(MCHS.value[vdata.saveObject.mchIndex].mchNo)
	})
	
	
	// 商户列表选择事件
	function onMchChange({detail}){
		const { value } = detail
		if(value !== vdata.saveObject.mchIndex){
			vdata.saveObject.mchIndex = value
			// 更新商户数据
			getMchInfo(MCHS.value[value].mchNo)
		}
	}
	
	// 选择位置
	function onChooseLocation(){
		uni.chooseLocation({
			success(res) {
				const { address, name, longitude, latitude } = res
				if(address && longitude && longitude){	// 更新位置以及经纬度
					Object.assign(mchInfo.value,{ address: address + name, location: { longitude, latitude } })
				}
			}
		})
	}
	// 用户定位事件
	async function onGetLocation(){
		uni.showLoading({
			title: '定位中...',
			mask: true
		})
		const { longitude, latitude, isReject, address } = await locationInit()
		uni.hideLoading()
		if(isReject) return;	// 此为用户禁止授权，不采用默认位置
		// 用户授权定位 保存授权到的经纬度
		Object.assign(mchInfo.value,{ address, location: { longitude, latitude } })
	}
	
	// 查询商户信息
	async function getMchInfo(mchNo){
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		const { bizData } = await $mchActivityMchInfo({ mchNo })
		uni.hideLoading()
		Object.assign(mchInfo.value,bizData)
	}
	// 表单提交
	function onSubmit(){
		uni.showModal({
			title: '提示',
			content: '请确认修改信息',
			async success({ cancel }) {
				if(cancel) return;
				// 请求数据处理
				const payload = {
					mchNo: mchInfo.value.mchNo,
					location: mchInfo.value.location,
					address: mchInfo.value.address
				}
				// 商户信息修改
				uni.showLoading({
					title: '修改中...',
					mask: true
				})
				await $mchActivityEditMchInfo(payload)
				$infoBox.toast('修改成功！')
			}
		})
	}
</script>

<style lang="less" scoped>
	@bg-color: #F5F6FA;
	.wrapper{
		width: 100%;
		min-height: 100vh;
		background-color: @bg-color;
		padding: 24rpx 32rpx 184rpx;
		box-sizing: border-box;
		position: relative;
		
		form{
			.block{
				background-color: #fff;
				border-radius: 16rpx;
				padding: 34rpx 20rpx;
				
				.line{
					width: 100%;
					height: 4rpx;
					background-color: #DDDDDD;
					margin: 20rpx 0;
					opacity: 0.6;
				}
				
				.row{
					display: flex;
					padding: 16rpx 0;
					align-items: center;
					
					&.edit{
						.label{
							align-self: flex-start;
						}
						.edit-btn{
							margin-left: 40rpx;
							color: #24C789;
							display: flex;
							align-items: center;
							gap: 10rpx;
							font-size: 28rpx;
							flex-shrink: 0;
						}
					}
					
					&.no-edit{
						flex-direction: column;
						background: #F5F6FA;
						border-radius: 12rpx;
						padding: 40rpx 20rpx;
						margin-top: 40rpx;
						.title{
							font-weight: bold;
						}
						.content{
							margin-top: 40rpx;
							align-self: flex-start;
							display: flex;
							flex-direction: column;
							gap: 40rpx;
							color: #999999;
						}
					}
					
					.label{
						min-width: 20%;
						flex-shrink: 0;
						font-size: 28rpx;
					}
					.vc{
						display: flex;
						align-items: center;
						button{
							width: initial;
							border: none;
							font-size: 28rpx;
							background-color: #fff;
							flex-shrink: 0;
							border-radius: 8rpx;
							padding: 5rpx 15rpx;
							line-height: initial;
						}
					}
					.input{
						font-size: 28rpx;
						word-break: break-all;
					}
					.picker{
						display: flex;
						align-items: center;
						.input{
							flex-grow: 1;
						}
						&.box{
							flex-grow: 1;
							border: 1rpx solid #DDDDDD;
							border-radius: 8rpx;
							padding: 10rpx 20rpx;
						}
						image{
							width: 28rpx;
							height: 28rpx;
							margin-left: 40rpx;
						}
					}
					input.input{
						
					}
					image.input{
						width: 120rpx;
						height: 120rpx;
					}
				}
				
				
				
				&:nth-child(2){
					margin-top: 24rpx;
					.row{
						.label{
							min-width: 35%;
						}
					}
				}
			}
			
			.btn-wrap{
				position: fixed;
				bottom: 0;
				left: 0;
				padding: 12rpx 32rpx 68rpx;
				width: 100%;
				background-color: #fff;
				z-index: 99;
				box-sizing: border-box;
				button{
					width: 100%;
					padding: 22rpx 0;
					text-align: center;
					background-color: #24C789;
					border-radius: 45rpx;
					box-sizing: border-box;
					color: #fff;
					border: none;
					line-height: initial;
				}
			}
		}
	}
	
</style>